import {
	ref,
	reactive,
	onMounted
} from 'vue';
import axios from 'axios';

export default function useHttp() {
	const result = ref(null);
	const error = ref(null);
	const isLoading = ref(false);

	const http = reactive({
		get: async (url) => {
			isLoading.value = true;
			try {
				const response = await axios.get(url);
				result.value = response.data;
			} catch (err) {
				error.value = err;
			} finally {
				isLoading.value = false;
			}
		},
		post: async (url, data) => {
			isLoading.value = true;
			try {
				const response = await axios.post(url, data);
				result.value = response.data;
			} catch (err) {
				error.value = err;
			} finally {
				isLoading.value = false;
			}
		},
	});

	onMounted(() => {
		error.value = null;
		result.value = null;
		isLoading.value = false;
	});

	return {
		http,
		result,
		error,
		isLoading,
	};
}